﻿$(function () {
    var selDate = {
        "area":[
            {"regionName":'成华区',"regionCode":"001"},
            {"regionName":'武侯区',"regionCode":"002"},
            {"regionName":'青羊区',"regionCode":"003"},
            {"regionName":'高新区',"regionCode":"004"},
            {"regionName":'锦江区',"regionCode":"005"}
        ],
        "street":[
            {"regionName":'成华区1',"regionCode":"001"},
            {"regionName":'成华区2',"regionCode":"002"},
            {"regionName":'成华区3',"regionCode":"003"},
            {"regionName":'成华区4',"regionCode":"004"},
            {"regionName":'成华区5',"regionCode":"005"}
        ],
        "place":[
            {"regionName":'街道1',"regionCode":"001"},
            {"regionName":'街道2',"regionCode":"002"},
            {"regionName":'街道3',"regionCode":"003"},
            {"regionName":'街道4',"regionCode":"004"},
            {"regionName":'街道5',"regionCode":"005"}
        ]
    };
// 一级联动事件触发
    form.on('select(test)', function(data){
        var value = data.value;
        areaState.area.fn(value);
    });

// 二级联动事件触发
    form.on('select(test1)', function(data){
        var value = data.value;
        areaState.street.fn(value);
    });

    var areaState = {
        area: {
            state: false,
            data: [],
            fn: function(value){ // value 表示的是区域代码，及传到后台的数据
                this.state = true; // 可能以后会用到
                areaState.street.state = false; // 可能以后会用到
                areaState.place.state = false; // 可能以后会用到

                // 从后台调用真实接口
                // get(function(data){
                //    areaState.street.data = data;
                //    console.log(areaState.street.data);
                //    addSelect('street select',areaState.street.data,false,'regionCode','regionName');
                // }

                areaState.street.data = selDate.street;
                if(value !== '') {
                    addSelect('quiz2',areaState.street.data,true,'regionCode','regionName');
                } else {
                    $('#quiz2').html('');
                    $('#quiz3').html('');
                    form.render("select");
                }

            }
        },
        street: {
            state: false,
            data: [],
            fn: function(value){
                this.state = true;
                areaState.place.state = false;

                areaState.place.data = selDate.place;
                if(value !== '') {
                    addSelect('quiz3',areaState.place.data,true,'regionCode','regionName');
                } else {
                    $('#quiz3').html('');
                    form.render("select");
                }
            }
        },
        place: {
            state: false,
            data: [],
            fn: function(){
                this.state = true;
            }
        }
    };

//select添加选项
    function addSelect(id,data,bool,val,text,region){//bool是否添加“请选择”选项
        val = val || 'type';
        text = text || 'name';
        var d="'"+region+"'";
        var html = '';
        var $id = $('#'+id);
        $id.html('');
        if(bool){html += '<option value="">请选择</option>';}
        for(var i in data){
            html +='<option value="'+data[i][val]+'">'+data[i][text]+'</option>';
        }
        $id.html(html);
        form.render("select");
    }

    addSelect('quiz1',selDate.area,true,'regionCode','regionName');

})
